<script setup lang="ts">
import * as video from '@/apis/video'
import { ref, watchEffect } from 'vue'

const videoList = ref([])

const loading = ref(true)
const count = ref(0)
const currentPage = ref(1)
const searchName = ref('')
const searchName_ = ref('')
watchEffect(() => {
  loading.value = true
  video.getList(20, currentPage.value - 1, { name: searchName_.value }).then(res => {
    res.data = res.data.data
    videoList.value = res.data.list
    count.value = res.data.count
    loading.value = false
  })
})

const search = () => {
  searchName_.value = searchName.value
}
</script>

<template>
  <el-card class="box-card" v-loading="loading">
    <template #header>
      <div class="card-header">
        <el-form @submit.prevent>
          <el-form-item label="剧集名字:">
            <el-input @change="search" v-model="searchName"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </template>

    <el-table :data="videoList" border style="width: 100%" table-layout="auto">
      <el-table-column prop="vod_id" label="id" />
      <el-table-column prop="vod_name" label="名字" />
      <!-- <el-table-column prop="vod_content" label="简介" /> -->
      <el-table-column prop="type_name" label="类型" />
      <!-- <el-table-column prop="vod_actor" label="演员" /> -->
      <!-- <el-table-column prop="vod_director" label="导演" /> -->
      <el-table-column prop="vod_area" label="地区" />
      <el-table-column prop="vod_time" label="更新时间" />
    </el-table>
    <div style="margin-top: 20px">
      <el-pagination v-model:current-page="currentPage" :page-size="20" :small="true" layout="total,prev, pager, next, jumper" :total="count" />
    </div>
  </el-card>
</template>

<style scoped></style>
